<template>
	<view>
		<view style="width: 90%;margin: 0 auto; margin-top: 10rpx;">

			<swiper class="swiper_wrapper" indicator-dots >
				<swiper-item v-for="item  in info" :key="item.id" @click="newDetail(item.id,item.title)">
					<span
						style="position: absolute; bottom: 10rpx; left: 15rpx; color: #fff;">{{item.title?item.title:"广告招租"}}</span>
					<image :src="item.img?item.img:require('@/static/gao1.jpg')" style="border-radius: 15rpx;">
					</image>
				</swiper-item>
			</swiper>

		</view>

		<view v-for="item in tableData" :key="item.id">
			<view class=""
				style="padding: 30rpx 10rpx;width: 90%;margin: 0 auto; position: relative; min-height: 185rpx; border-bottom: solid 1rpx rgb(228, 228, 228);"
				@click="newDetail(item.id,item.title)">
				<view
					style="width: 70%; word-wrap: break-word;font-size: 48rpx; margin-bottom: 19rpx;">
					{{item.title}}
				</view>

				<view style="font-size: 28rpx; color: rgb(171,175,178);">{{item.time}}&nbsp;&nbsp;{{item.author}}</view>
				<img v-if="item.img!=''" :src="item.img" alt=""
					style="width: 160rpx;height: 160rpx; position: absolute;right: 10rpx;top: 25rpx; border-radius: 10%;">

			</view>
		</view>
		<view v-if="tableData.length === 0"
			style="text-align: center; font-size: 48rpx; height: 100vh; line-height: 100vh; color:rgb(127,127,126) ;">
			最近没有新闻哦！
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: [{
					title:'',
					img:''
				}],
				current: 0,
				// mode: 'round',
				// dotsStyles: {
				// 	// backgroundColor: 'rgba(83, 200, 249,0.3)',
				// 	// border: '1px rgba(83, 200, 249,0.3) solid',
				// 	// selectedBackgroundColor: 'rgba(83, 200, 249,0.9)',
				// 	// selectedBorder: '1px rgba(83, 200, 249,0.9) solid'
				// 	backgroundColor: 'rgba(0, 0, 0, .3)',
				// 	border: '1px rgba(65,105,225,0.3) solid',
				// 	// selectedBackgroundColor: 'rgba(65,105,225,0.7)',
				// 	// selectedBorder: '1px rgba(65,105,225,0.7) solid'
				// },
				tableData: [],
			}
		},
		onLoad() {
			this.loading();

		},
		onPullDownRefresh() {
			this.request({
				url: '/news/frontList',
			}).then(res => {
				if (res.code === '0') {
					setTimeout(function() {
						uni.stopPullDownRefresh();
						setTimeout(function() {
							uni.showToast({
								title: '加载成功'
							})
						}, 200);
					}, 800);
				}
				this.tableData = res.data;
				this.tableData.forEach(e => {
					let t1 = e.content.split(/src="/)[1];
					if (t1) {
						e.img = t1.split("\"")[0];
					} else {
						e.img = '';
					}
				});
			});
			
			this.request({
				url: '/news/front',
			}).then(res => {
				if(res.data.length === 0){
					return;
				}
				this.info = res.data;
				this.info.forEach(e => {
					let t1 = e.content.split(/src="/)[1];
					if (t1) {
						e.img = t1.split("\"")[0];
					} else {
						e.img = '';
					}
				});
			});
		},
		methods: {
			// change(e) {
			// 	this.current = e.detail.current;
			// 	// console.log(e.detail.current);
			// },
			newDetailtest(index) {
				console.log(index);
			},
			loading() {
				this.request({
					url: '/news/frontList',
				}).then(res => {
					this.tableData = res.data;
					this.tableData.forEach(e => {
						let t1 = e.content.split(/src="/)[1];
						if (t1) {
							e.img = t1.split("\"")[0];
						} else {
							e.img = '';
						}
					});
				});
				this.request({
					url: '/news/front',
				}).then(res => {
					if(res.data.length === 0){
						return;
					}
					this.info = res.data;
					this.info.forEach(e => {
						let t1 = e.content.split(/src="/)[1];
						if (t1) {
							e.img = t1.split("\"")[0];
						} else {
							e.img = '';
						}
					});
				});
			},
			newDetail(newId, newTitle) {
				uni.navigateTo({
					url: `/pages/new/newDetail?newId=${newId}&newTitle=${newTitle}`
				});
			},
		}
	}
</script>

<style>
	/* .wx-swiper-dots {
  position: absolute;
  bottom: 22rpx;
  left: 636rpx;
}
.wx-swiper-dot {
  width: 10rpx;
  height: 4rpx;
  background: #FFFFFF;
  border-radius: 4rpx;
  opacity: 0.4;
}
.wx-swiper-dot.wx-swiper-dot-active {
  width: 20rpx;
  height: 4rpx;
  background: #FFFFFF;
  border-radius: 4rpx;
  opacity: 1;
} */
	.swiper_wrapper {
		height: 420rpx;
	}

	.swiper_wrapper image {
		width: 100%;
		height: 100%;
	}

	.swiper_wrapper .wx-swiper-dots {
		position: absolute;
		bottom: 22rpx;
		left: 600rpx;
		/* left: 636rpx; */
		/* right: 0rpx; */
	}

	.swiper_wrapper .wx-swiper-dot {
		width: 10rpx;
		height: 4rpx;
		background: #FFFFFF;
		border-radius: 4rpx;
		opacity: 0.4;
	}

	.swiper_wrapper .wx-swiper-dot.wx-swiper-dot-active {
		width: 20rpx;
		height: 4rpx;
		background: #FFFFFF;
		border-radius: 4rpx;
		opacity: 1;
	}
</style>
